<template>
  <div ref="mapRef" class="map"></div>
</template>

<script setup lang="ts">
import * as echarts from "echarts"
import { nextTick, onMounted, ref } from "vue"

const props = defineProps({
  data: {
    type: Array,
    default: () => [],
  },
})

const mapRef = ref()
onMounted(() => {
  nextTick(() => {
    let myChart = echarts.init(mapRef.value)
    const option = {
      tooltip: {
        trigger: "axis",
        formatter: (params: any[]) => {
          let tooltipHtml = ""
          params.forEach((param) => {
            tooltipHtml += `${param.name}: ${param.value}%<br/>`
          })
          return tooltipHtml
        },
      },
      legend: {},
      grid: {
        left: "60",
        right: "60",
        top: "30",
        bottom: "40",
        // containLabel: true
      },
      xAxis: {
        type: "category",
        // boundaryGap: false,
        data: props.data.map((item: any) => item.title),
        axisLabel: {
          fontSize: 11,
          color: "#9FA9BD",
          interval: 0, // 显示所有标签
          rotate: 45, // 旋转标签以避免重叠
        },
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
      yAxis: {
        type: "value",
        axisLabel: {
          fontSize: 11,
          color: "#9FA9BD",
          margin: 15, // 标签与轴线的距离
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#EBECEC",
            type: "dashed",
          },
        },
      },
      series: [
        {
          type: "bar",
          data: props.data.map((item: any) => Number(item.percent)),
          itemStyle: {
            color: "#F7B500", // 默认颜色
          },
          emphasis: {
            itemStyle: {
              color: "#02ACF7", // 鼠标划过时的颜色
            },
          },
        },
      ],
    }

    option && myChart.setOption(option)
    window.addEventListener("resize", () => {
      myChart.resize()
    })
  })
})
</script>

<style lang="scss" scoped></style>
